<template>
  <u-popup
    :safeAreaInsetBottom="false"
    :closeOnClickOverlay="true"
    @close="closeIntegralRecharge"
    :show="true"
    bgColor="transparent"
    mode="bottom"
    round="10px"
  >
    <view class="content">
      <div class="title_wrap">
        <div class="cancel" @click="closeIntegralRecharge">取消</div>
        <div class="title">积分充值</div>
      </div>
      <div class="notice">
        <text class="text1">当前积分余额</text>
        <text class="text2">{{ integral }}</text>
        <text class="text1">,还需</text>
        <text class="text2">{{ integralNeed }}</text>
        <text class="text1">积分即可加急</text>
      </div>
      <div class="s_title">充值积分</div>
      <div class="s_wrap">
        <div
          class="item"
          @click="clickItem(item, index)"
          :class="[active == index ? 'active' : '']"
          v-for="(item, index) in integralList"
          :key="item"
        >
          <div class="scwzyh" v-if="item.is_first">首冲5折优惠</div>
          <div class="scwzyh" v-else>{{ integralTag[index] }}</div>

          <img
            v-if="active == index"
            class="xz"
            src="../image/check-icon.png"
            mode="scaleToFill"
          />
          <div class="t1">{{ item.integral || 0 }}积分</div>
          <div class="t2">
            <text class="n">
              {{ item.is_first ? item.first_by_price : item.price }}
            </text>
            <text class="tt">元</text>
          </div>
          <div class="t3">{{ item.original_price || 0 }}元</div>
          <div class="t4">
            每积分{{
              item.is_first ? item.first_by_price : item.integral_by_price
            }}元
          </div>
        </div>
      </div>
      <div class="d_c">
        <div>充值说明</div>
        <div>积分全平台通用，永不过期</div>
        <div>如遇到问题，可联系客服反馈</div>
      </div>
      <div class="footer" :class="[$isIos() == 'IOS' ? 'ios' : '']">
        <div class="btn" @click="setOrderInfo">
          确认支付{{
            selectRecharge.is_first
              ? selectRecharge.first_by_price
              : selectRecharge.price
          }}元
        </div>
        <div
          class="xy"
          @click="$togo('/pages3/userAgreement', { type: 'yhczxy' })"
        >
          <text>充值即代表同意</text>
          <text class="xy_text">《用户充值协议》</text>
        </div>
      </div>
    </view>
  </u-popup>
</template>

<script>
export default {
  name: "IntegralRecharge",
  props: {
    integral: {
      type: Number,
      default: 0
    },
    integralNeed: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      active: 0,
      integralList: [],
      integralTag: [
        "小试牛刀",
        "短线优惠",
        "52%用户选择",
        "32%用户选择",
        "性价比推荐",
        "长期超划算"
      ],
      selectRecharge: null,
    };
  },
  async created() {
    await this.getData();
  },
  methods: {
    clickItem(item, index) {
      this.selectRecharge = item;
      this.active = index;
    },
    closeIntegralRecharge() {
      this.$emit("closeIntegralRecharge");
    },
    async getData() {
      let res = await this.$http.requestSync("/bills/get_pay_conf");
      if (res.code == 200) {
        this.integralList = res.pay_conf.splice(0, 6);
        let obj = this.integralList[this.active];
        for (let index = 0; index < this.integralList.length; index++) {
          const el = this.integralList[index];
          if (el.integral > this.integralNeed) {
            this.active = index;
            obj = this.integralList[this.active];
            break;
          }
        }
        this.selectRecharge = obj;
      }
    },
    async setOrderInfo() {
      let params = {
        price: this.selectRecharge.is_first
          ? this.selectRecharge.first_by_price
          : this.selectRecharge.price,
        integral: this.selectRecharge.integral
      };
      let res = await this.$http.requestSync("/bills/wxpay", params);
      if (res.code == 200) {
        uni.requestPayment({
          provider: "wxpay",
          orderInfo: res.orderInfo,
          timeStamp: res.timeStamp,
          nonceStr: res.nonceStr,
          package: res.package,
          signType: res.signType,
          paySign: res.paySign,
          success: () => {
            this.$emit("close");
          },
          fail: (err) => {
            console.log(err);
          }
        });
      }
    }
  }
};
</script>

<style scoped lang="scss">
.content {
  width: 100%;
  background: #fff;
  border-radius: 10px 10px 0 0;
  box-sizing: border-box;
  padding: 0 16px;
  padding-bottom: 10px;
  .title_wrap {
    height: 45px;
    line-height: 45px;
    .cancel {
      width: 50px;
      position: absolute;
      left: 16px;
      font-size: 14px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
    }
    .title {
      width: 100%;
      text-align: center;
      font-size: 16px;
      font-family: PingFang SC-Semibold, PingFang SC;
      font-weight: 600;
      color: #333333;
    }
  }
  .notice {
    // width: 345px;
    width: 100%;
    height: 32px;
    background: #f3f3f3;
    border-radius: 5px 5px 5px 5px;
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 16px;
    text-align: center;
    line-height: 32px;
    .text2 {
      font-weight: 500;
      color: #ff8d22;
      margin: 0 3px;
    }
  }
  .s_title {
    font-size: 14px;
    font-family: PingFang SC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333333;
    margin: 20px auto 10px;
  }
  .s_wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .item {
      width: 108px;
      height: 123px;
      background: #f7f7f7;
      border-radius: 5px 5px 5px 5px;
      text-align: center;
      display: table;
      position: relative;
      margin-bottom: 17px;
      .scwzyh {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 70px;
        height: 22px;
        position: absolute;
        background: linear-gradient(270deg, #7c6b52 0%, #503b22 100%);
        border-radius: 5px 5px 5px 2px;
        font-weight: 600;
        color: #ffdfaf;
        font-size: 10px;
        left: 0px;
        top: -7px;
      }
      .xz {
        position: absolute;
        right: 0;
        top: 0;
        width: 22px;
        height: 22px;
      }
      .t1 {
        height: 18px;
        font-size: 18px;
        font-family: PingFang SC-Semibold, PingFang SC;
        font-weight: 600;
        color: #333333;
        margin: 27px auto 10px;
      }
      .t2 {
        .n {
          font-size: 22px;
          font-family: Arial Black-Regular, Arial Black;
          font-weight: 900;
          color: #794b04;
        }
        .tt {
          font-size: 10px;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #794b04;
        }
      }
      .t3 {
        transform: rotate(0.8);
        font-size: 10px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        text-decoration: line-through;
      }
      .t4 {
        transform: rotate(0.8);
        width: 86px;
        height: 18px;
        background: #f6d6ad;
        border-radius: 2px 2px 2px 2px;
        line-height: 18px;
        font-size: 10px;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #c58a2f;
        margin: 5px auto;
      }
    }
  }
  .d_c {
    font-size: 12px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
  }
  .footer {
    background: #fff;
    box-sizing: border-box;
    .btn {
      height: 46px;
      line-height: 46px;
      background: linear-gradient(270deg, #ffa222 0%, #ff8822 100%);
      border-radius: 23px 23px 23px 23px;
      font-size: 18px;
      font-family: PingFang SC-Semibold, PingFang SC;
      font-weight: 600;
      color: #ffffff;
      text-align: center;
      margin: 12px auto;
    }
    .xy {
      width: 100%;
      height: 16px;
      font-size: 12px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: 16px;
      text-align: center;
      .xy_text {
        color: #ffa222;
      }
    }
  }
  .active {
    background: linear-gradient(180deg, #fff2e1 0%, #fce2c5 100%) !important;
  }
}
</style>
